<template>
    <div class="content">
        <div class="left">
            <div class="title1">组卷编辑</div>
            <a-form ref="formRef" :model="formState" :rules="rules" class="leftForm">
                <a-form-item label="课程" name="region" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                    <a-select v-model:value="formState.region">
                        <a-select-option value="语文">语文</a-select-option>
                        <a-select-option value="数学">数学</a-select-option>
                        <a-select-option value="英语">英语</a-select-option>
                        <a-select-option value="物理">物理</a-select-option>
                        <a-select-option value="化学">化学</a-select-option>
                        <a-select-option value="生物">生物</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="单选题" name="singleChoice">
                    <div class="titlesBox">
                        <div class="minus" @click="minus">-</div>
                        <a-input v-model:value="formState.singleChoice"></a-input>
                        <div class="plus" @click="plus">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="多选题" name="multipleChoice">
                    <div class="titlesBox">
                        <div class="minus" @click="minusMultiple">-</div>
                        <a-input v-model:value="formState.multipleChoice"></a-input>
                        <div class="plus" @click="plusMultiple">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="判断题" name="trueFalse">
                    <div class="titlesBox">
                        <div class="minus" @click="minusTrueFalse">-</div>
                        <a-input v-model:value="formState.trueFalse"></a-input>
                        <div class="plus" @click="plusTrueFalse">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="填空题" name="gapFilling">
                    <div class="titlesBox">
                        <div class="minus" @click="minusGapFilling">-</div>
                        <a-input v-model:value="formState.gapFilling"></a-input>
                        <div class="plus" @click="plusGapFilling">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="简答题" name="shortAnswer">
                    <div class="titlesBox">
                        <div class="minus" @click="minusShortAnswer">-</div>
                        <a-input v-model:value="formState.shortAnswer"></a-input>
                        <div class="plus" @click="plusShortAnswer">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="组合题" name="compose">
                    <div class="titlesBox">
                        <div class="minus" @click="minusCompose">-</div>
                        <a-input v-model:value="formState.compose"></a-input>
                        <div class="plus" @click="plusCompose">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="组合题" name="compose">
                    <a-rate v-model:value="formState.difficult" />
                </a-form-item>
            </a-form>
            <button class="volumeGroupBtn">开始卷组</button>
        </div>
        <div class="right">
            <div class="title2">试卷编辑</div>
            <a-form ref="formRef" :model="formState" :rules="rules">
                <a-form-item label="试卷类型" name="region" style="margin-bottom: 30px;">
                    <a-select v-model:value="formState.TestPaperType" style="width: 98%;">
                        <a-select-option value="A">A类</a-select-option>
                        <a-select-option value="B">B类</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="试卷名称" name="region" style="text-align: left;margin-bottom: 10px;">
                    <a-input v-model:value="formState.TestPaperName" style="width: 98%;height: 48px;"></a-input>
                </a-form-item>
                <a-form-item class="radioBtn">
                    <a-radio-group v-model:value="formState.anti_cheating">
                        <a-radio :value="1">防作弊</a-radio>
                        <a-radio :value="2">题序打乱</a-radio>
                        <a-radio :value="3">选项打乱</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="合格分" style="margin-left: 31px;">
                    <div class="titlesBox">
                        <div class="minus" @click="minusPassingScore">-</div>
                        <a-input v-model:value="formState.passingScore"></a-input>
                        <div class="plus" @click="plusPassingScore">+</div>
                    </div>
                </a-form-item>
                <a-form-item label="试卷总分" name="testPaperScore">
                    <a-input v-model:value="formState.testPaperScore"
                        style="text-align: left;border: none;margin-top: 15px;"></a-input>
                </a-form-item>
                <a-form-item label="考试时长" name="testTime">
                    <div class="titlesBox">
                        <div class="minus" @click="minusTestTime">-</div>
                        <a-input v-model:value="formState.testTime" style="color: black;"></a-input>
                        <div class="plus" @click="plusTestTime">+</div>
                        <div class="unit">分钟</div>
                    </div>
                </a-form-item>
            </a-form>
            <div class="operateBtn">
                <button class="submitBtn">提交</button>
                <button class="addTitleBtn">添加标题</button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
const formState = ref({
    region: [],
    singleChoice: 0,
    multipleChoice: 0,
    trueFalse: 0,
    gapFilling: 0,
    shortAnswer: 0,
    compose: 0,
    difficult: 1,
    TestPaperType: '',
    TestPaperName: '',
    anti_cheating: 2,
    passingScore: 0,
    testPaperScore: 0,
    testTime: 0,
})
const rules: Record<string, Rule[]> = {
    region: [{ required: true, message: '请选择课程', trigger: 'blur' }],
    singleChoice: [{ message: '单选题个数不为0', trigger: 'blur' }],
    multipleChoice: [{ message: '多选题个数不为0', trigger: 'blur' }],
    trueFalse: [{ message: '判断题个数不为0', trigger: 'blur' }],
    gapFilling: [{ message: '填空题个数不为0', trigger: 'blur' }],
    shortAnswer: [{ message: '简答题个数不为0', trigger: 'blur' }],
    compose: [{ message: '组合题个数不为0', trigger: 'blur' }],
    testPaperScore: [{ required: true, message: '试卷总分不能为0', trigger: 'blur' }],
    testTime: [{ required: true, message: '试卷总分不能为0', trigger: 'blur' }],
};
function minus() {
    if (formState.value.singleChoice <= 0) {
        return
    } else {
        formState.value.singleChoice--
    }

}
function plus() {
    if (formState.value.singleChoice >= 20) {
        return
    } else {
        formState.value.singleChoice++
    }
}
function minusMultiple() {
    if (formState.value.multipleChoice <= 0) {
        return
    } else {
        formState.value.multipleChoice--
    }

}
function plusMultiple() {
    if (formState.value.multipleChoice >= 20) {
        return
    } else {
        formState.value.multipleChoice++
    }
}
function minusTrueFalse() {
    if (formState.value.trueFalse <= 0) {
        return
    } else {
        formState.value.trueFalse--
    }

}
function plusTrueFalse() {
    if (formState.value.trueFalse >= 20) {
        return
    } else {
        formState.value.trueFalse++
    }
}
function minusGapFilling() {
    if (formState.value.gapFilling <= 0) {
        return
    } else {
        formState.value.gapFilling--
    }

}
function plusGapFilling() {
    if (formState.value.gapFilling >= 20) {
        return
    } else {
        formState.value.gapFilling++
    }
}
function minusShortAnswer() {
    if (formState.value.shortAnswer <= 0) {
        return
    } else {
        formState.value.shortAnswer--
    }

}
function plusShortAnswer() {
    if (formState.value.shortAnswer >= 20) {
        return
    } else {
        formState.value.shortAnswer++
    }
}
function minusCompose() {
    if (formState.value.compose <= 0) {
        return
    } else {
        formState.value.compose--
    }

}
function plusCompose() {
    if (formState.value.compose >= 20) {
        return
    } else {
        formState.value.compose++
    }
}
function minusPassingScore() {
    if (formState.value.passingScore <= 0) {
        return
    } else {
        formState.value.passingScore--
    }

}
function plusPassingScore() {
    if (formState.value.passingScore >= 100) {
        return
    } else {
        formState.value.passingScore++
    }
}
function minusTestTime() {
    if (formState.value.testTime <= 0) {
        return
    } else {
        formState.value.testTime--
    }

}
function plusTestTime() {
    if (formState.value.testTime >= 100) {
        return
    } else {
        formState.value.testTime++
    }
}
</script>
<style scoped>
.content {
    width: 1857px;
    height: 851px;
    display: flex;
}

.left {
    width: 374px;
    height: 820px;
    background-color: #ffffff;
    margin-right: 25px;
    border-radius: 10px;
    padding-left: 20px;
}

.right {
    width: 1457px;
    height: 820px;
    background-color: skyblue;
    background-color: #ffffff;
    border-radius: 10px;
    padding-left: 40px;
    position: relative;
}

.title1 {
    font-size: 26px;
    margin-left: 16px;
    margin-top: 20px;
}

.title2 {
    font-size: 26px;
    /* margin-left: 40px; */
    margin-top: 20px;
}

/* 课程 */
:deep().ant-select.ant-select-in-form-item {
    width: 235px;
    font-size: 20px;
}


:deep().ant-col {
    height: 48px;
    line-height: 52px;
    margin-right: 10px;
}

:deep().ant-form-item-label>label {
    font-size: 20px;
}

:deep().ant-form {
    margin-top: 21px;
}

:deep().ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 48px;
}

:deep().ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
    height: 48px;
    line-height: 48px;
}

:deep().ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    line-height: 40px;
}

/* 课程 */
.titlesBox {
    display: flex;
}

.minus {
    width: 48px;
    height: 48px;
    background-color: #f2f3f5;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 30px;
    text-align: center;
    line-height: 42px;
    border: 1px solid #d9d9d9;
    border-right: none;
}

.plus {
    width: 48px;
    height: 48px;
    background-color: #f2f3f5;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 30px;
    text-align: center;
    line-height: 42px;
    border: 1px solid #d9d9d9;
    border-left: none;
}

:deep().ant-input {
    width: 140px;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    font-size: large;
}

:deep().ant-input:focus,
.ant-input-focused {
    border-color: #d9d9d9;
    box-shadow: none;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

:deep().ant-input:hover {
    border-color: #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

:deep().ant-rate {
    color: #4080ff;
}

:deep().ant-form-item-with-help .ant-form-item-explain {
    height: 0px;
    min-height: 0px;
}

.radioBtn {
    margin-left: 115px;
}

.unit {
    position: absolute;
    left: 250px;
    font-size: 18px;
}

.volumeGroupBtn {
    width: 311px;
    height: 56px;
    position: absolute;
    left: 60px;
    bottom: 85px;
    font-size: 24px;
    color: #ffffff;
    background-color: #4080ff;
    line-height: 56px;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 5px;
}

.operateBtn {
    position: absolute;
    top: 23px;
    right: 36px;
}

.operateBtn>button {
    width: 120px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    color: #ffffff;
    background-color: #4080ff;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 5px;
}

.addTitleBtn {
    margin-left: 10px;
}

/* --- */
:deep().ant-radio-inner {
    border-radius: 0px;
}

:deep().ant-radio-checked .ant-radio-inner {
    background-color: #4080ff;
}

:deep().ant-radio-inner::after {
    height: 6px;
    width: 10px;
    border-radius: 0px;
    border: 2.5px solid #ffffff;
    background-color: #4080ff;
    border-top: #4080ff;
    border-right: #4080ff;
    transform: rotate(-45deg);
    margin-top: -4px;
    margin-left: -5px;
}
</style>